<!-- 弹出框 -->
<template>
  <el-dialog
    v-model="isShowPopup"
    title="分配角色"
    draggable
    :before-close="() => cancel"
  >
    <el-form :model="from">
      <el-form-item label="账号 :">
        <el-input v-model="from.username" placeholder="请输入账号" />
      </el-form-item>
      <el-form-item label="姓名 :">
        <el-input v-model="from.nickName" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="邮箱 :">
        <el-input v-model="from.email" placeholder="请输入邮箱" />
      </el-form-item>
      <el-form-item label="密码 :">
        <el-input
          v-model="from.password"
          type="password"
          show-password
          placeholder="请输入密码"
        />
      </el-form-item>
      <el-form-item label="备注 :">
        <el-input
          v-model="from.note"
          type="textarea"
          placeholder="请输入备注"
        />
      </el-form-item>
      <el-form-item label="是否启用 :">
        <el-radio-group v-model="from.status">
          <el-radio :label="1" size="large">是</el-radio>
          <el-radio :label="0" size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary" @click="open">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref, Ref, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { adminUpdateApi, CreateRoleApi } from '../../../request/api';
import router from '../../../router';
let props = defineProps<{
  isShowPopup: boolean;
  adminObj: AdmininfoType;
  message: string;
}>();
const from = ref({}) as Ref<AdmininfoType>;
watch(
  () => props.isShowPopup,
  (newVal, oldVal) => {
    if (newVal) {
      // 浅拷贝，为了不影响到父组件的响应式数据
      from.value = { ...props.adminObj };
    }
  }
);
let emit = defineEmits<{
  (event: 'hidden', flag?: string): void;
}>();
function cancel(flag?: string) {
  emit('hidden', flag);
}

const open = () => {
  ElMessageBox.confirm('此操作将修改当前用户信息, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      if (props.message == 'addRole') {
        // console.log(props.message);
        CreateRoleApi(from.value).then((res) => {
          if (res.code == 200) {
            // console.log(res);
            cancel('reloadTable');
          }
        });
      } else {
        adminUpdateApi(from.value.id, from.value).then((res) => {
          if (res.code == 200) {
            cancel('reloadTable');
          }
        });
      }
    })
    .catch(() => {
      // ElMessage({
      //   type: 'info',
      //   message: 'Delete canceled',
      // });
    });
};
</script>
<style lang="less" scoped>
.btnBox {
  text-align: right;
}
:deep(.el-form-item__label) {
  width: 120px;
  height: 40px;
  line-height: 40px;
}
:deep(.el-button) {
  width: 80px;
  height: 40px;
}
</style>
